import { Button } from "antd";
import React, { Suspense, lazy } from "react";
import { Link, Route, Routes } from "react-router-dom";
import Md from "./doc.md";

const Home = lazy(() => import(/* webpackChunkName: "home" */ "./page/home"));
const About = lazy(() =>
  import(/* webpackChunkName: "about" */ "./page/about")
);

const App = () => {
  console.log(Md);

  return (
    <div>
      <div>
        <Link to="/home">GO TO HOME</Link>
      </div>
      <div>
        <Link to="/about">GO TO ABOUT</Link>
      </div>
      <Button type="primary">antd 按钮</Button>
      <div>
        <img src="https://picsum.photos/200" alt="Random Image" />
      </div>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/home" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
      <div dangerouslySetInnerHTML={{ __html: Md }}></div>
    </div>
  );
};

export default App;
